

<template>
<div>
  <div class="goodsrecycle-mokuai">
    <!-- 筛选查找 -->
     <div class="goodsrecycle-index">
       <div  class="goodsrecycle-index-top">
    <div class="goodsrecycle-name">
      <div class="goodsrecycle-name-font">
        <i class="el-icon-search"></i>
        筛选查询
      </div> 
      <div class="goodsrecycle-name-right">
          <el-button @click="onSubmit">查询结果</el-button>
      </div>
        <div class="goodsrecycle-name-right" @click="packUp">
        <i class="el-icon-arrow-up"></i>
        收起筛选
      </div> 
    </div>
    <div  class="goodsrecycle-content">   
<!-- 筛选条件 -->
 <div class="goodsrecycle-button-select-2"  v-if="showPrise">
 <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="输入搜索:">
            <el-input v-model="formInline.spuName" placeholder="评价关键词/商品名称" class="select-width-1" clearable></el-input>
          </el-form-item>
         
          <el-form-item label="用户昵称:">
            <el-input v-model="formInline.userName" placeholder="输入用户昵称" class="select-width-1" clearable></el-input>
          </el-form-item>
    
        </el-form>
 </div>

 

    </div>
     </div>
   </div>

    <!-- 数据模块 -->
  <div class="goodsrecycle-index">
      <div  class="goodsrecycle-index-top">
    <div class="goodsrecycle-name">
      <div class="goodsrecycle-name-font">
        <i class="el-icon-s-unfold"></i>
        数据列表
      </div> 
       <div class="goodsrecycle-index-select">
          <el-form :inline="true" :model="listLine" class="demo-form-inline" size="small">
            <el-form-item label="">
            <el-select v-model="listLine.type" placeholder="排序方式" class="select-width-2">
              <el-option label="用户昵称" :value="0"></el-option>
              <el-option label="商品名称" :value="1"></el-option>
            </el-select>
          </el-form-item>
  
        </el-form>
      </div>
    </div>
    <div  class="goodsrecycle-content">   
<!-- 数据列表 -->
 <div>
<el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55"
      align="center">
    </el-table-column>
    <el-table-column
      label="编号"
      width="90"
      align="center">
      <template slot-scope="scope">{{ scope.row.appaiseNumber}}</template>
    </el-table-column>
    <el-table-column
      prop="userName"
      label="用户昵称"
      width="90"
      align="center">
    </el-table-column>
    <el-table-column
      prop="spuName"
      label="商品名称"
      align="center"
      show-overflow-tooltip>
    </el-table-column>
     <el-table-column
      prop="appaiseImg"
      label="评价"
      width="110"
      align="center">
       <template scope="scope">
           
              <el-rate
  v-model="scope.row.appaiseImg"
  :max="3"
  disabled

  >
</el-rate>
      </template>
    </el-table-column>
     <el-table-column
      prop="ip"
      label="IP地址"
      width="130"
      align="center">
    </el-table-column>
     <el-table-column
      prop="appaiseCreateTime"
      label="评论时间"
      width="160"
      align="center">
    </el-table-column>
     <el-table-column
      label="是否显示"
       width="100"
      align="center">
     <template slot-scope="scope"><el-switch v-model="scope.row.isShow" :active-value="1" :inactive-value="0" disabled></el-switch></template>
     </el-table-column>

   
  <el-table-column fixed="right" label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.$index, scope.row)" type="text" size="small">查看</el-button>
              <el-button type="text" size="small" @click="deleteOne(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
  </el-table>
 </div>
 <!-- 页脚 -->
<div class="goodsrecycle-paging">
  <!-- 批量操作 -->
    <div class="goodsrecycle-paging-leftlayout">
      <div class="opertation-block">
        <!-- 全选需要设置方法目前只能操作0，1数据 -->
           <el-button @click="toggleSelection(tableData)" size="small">全选</el-button>
      </div>
      <div class="opertation-block">
        <el-form :inline="false" :model="operation" class="demo-form-inline" size="small">
          <el-form-item label="">
            <el-select v-model="operation.opertationType" placeholder="批量操作" class="select-width-2">
              <el-option label="删除评论" :value="1"></el-option>
              <el-option label="显示评论" :value="2"></el-option>
              <el-option label="隐藏评论" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div class="opertation-block" >
    <el-button size="small" @click="operta">确定</el-button>
      </div>
    </div>
    <!-- 分页 -->
<div class="goodsrecycle-paging-layout">
<div class="block">
    <span class="demonstration"></span>
    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-sizes="pageSizes"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                  ></el-pagination>
  </div>
 </div>
</div>
 

    </div>
     </div>
   </div>
</div>
  </div>
</template>


<style>
/* 自定义 */

.select-width-1{
  width: 200px;
}
.select-width-2{
  width: 100px;
}
.goodsrecycle-mokuai{
  height: 1000px;
  background-color: rgb(249, 249, 249);

}
.goodsrecycle-index{
  width: 100%;
  margin: auto;
  background-color: rgb(255, 255, 255);

}
.goodsrecycle-index-top{
 margin-top: 30px;
}
.goodsrecycle-name{
  width: 100%;
  height:50px;
  padding-top: 10px;
  background-color: rgb(240, 240, 240);

}
.goodsrecycle-name-font{
   height: 40px;
  line-height: 40px;
  float: left;
  margin-left: 20px;
   font-size: 14px;
}
.goodsrecycle-name-right{
   height: 40px;
  line-height: 40px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
}
.goodsrecycle-index-select{
  width: 260px;
  float: right;
  margin-right: 20px;
  font-size: 14px;
  padding-top: 5px;
}
.goodsrecycle-content{
  width: 100%;
}
.goodsrecycle-button-select-2{
  height: 50px;
 padding-top:10px;
 padding-left: 20px;

}

.opertation-block{
  display: inline-block;
  margin-left: 3px;
}
.goodsrecycle-paging{

  height: 50px;
  width: 100%;
  background-color: rgb(253, 253, 254);
}
.goodsrecycle-paging-leftlayout{
  float:left;
   margin-top: 7px;
}
 .goodsrecycle-paging-layout{
  float: right;
  margin-top: 7px;
 }
</style>

<script>

import appraiseApi from "@/api/goods/appaise"
   export default {
    data() {
       
      return {
        // 隐藏
       showPrise:true,
        // 筛选
         formInline: {
          spuName:"",
          userName:"",
        
      },
      listLine: {
       type:0,
      },
      operation:{
      opertationType:"",
      },
        // 列表数据
         tableData: [],
         
        multipleSelection: [],
        // 分页
      // 分页数据
       pageSize: 2,
      pageSizes: [2, 3, 4, 5, 10, 25, 50, 100],
       total: 5,
      currentPage1: 1,
       
      }
    },

    watch:{
      // 排序方式
"listLine.type":function(){

  this.intData();
}

    },
      methods: {
        // 数据列表
          toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      // 获取选择的ids
      handleSelectionChange(val) {
        this.multipleSelection = [];

val.forEach(item=>{


this.multipleSelection[this.multipleSelection.length]=item.id;

})

      },

// 批量操作
      operta(){
        console.log(this.multipleSelection);
        if(!this.operation.opertationType){
          this.$message("无效的操作");
        }else{

 console.log(this.operation.opertationType) ;
 appraiseApi.updateAll(this.multipleSelection, this.operation.opertationType).then(response=>{

console.log(response);
this.intData();


 })
        }
         
      },
         handleClick(index,row) {
           
           this.$router.push({path:"/goods/evaluationDetails",query:{spuId:row.spuId}})
         },

        //  单条删除
         deleteOne(index,row){
appraiseApi.deleteOne(row.id).then(response=>{


  console.log(response);
  this.intData();
})
         },
        // 分页
      handleSizeChange(val) {
       this.pageSize=val;

this.intData();

      },
      handleCurrentChange(val) {
      this.currentPage1=val;
      
     
this.intData();

      },
         onSubmit() {
           this.currentPage1=1;
           this.intData();
    
    },
    // 点击显示和隐藏
    packUp:function(){
     this.showPrise = !this.showPrise;
     },
    //  获取数据
     intData(){

       let dto={
pageNum:this.currentPage1,
 pageSize:this.pageSize,
 spuName:this.formInline.spuName,
 userName:this.formInline.userName,
 type:this.listLine.type

};


 appraiseApi.getList(dto.pageNum, dto.pageSize,dto.spuName,dto.userName,dto.type).then(response=>{

   console.log(response);

this.tableData=response.data.data.list;
this.total=response.data.data.total;
 })
     }


    },

    created(){


this.intData();


    }
  }
  
</script>